﻿@model FileUploader

@using SmartStore.Core.Domain.Media;
@using SmartStore.Core.Domain.Catalog;
@using SmartStore.Services.Media;

@{
    Html.AddScriptParts(true, "~/bundles/fileuploader");

    if (!Model.Name.HasValue())
    {
        Model.Name = "upload-" + CommonHelper.GenerateRandomInteger();
    }

    if (!Model.HtmlAttributes.ContainsKey("id"))
    {
        Model.Id = Model.Name;
    }

    var mediaSettings = this.CommonServices.Resolve<MediaSettings>();
    var maxFilesSize = mediaSettings.MaxUploadFileSize;
}

<div @Html.Attr("class", "dropzone-container", Model.Multifile || !Model.HasTemplatePreview)>
    <div class="dropzone-target">
        <div class="dropzone-file-info d-flex align-items-center">
            <div class="fu-message text-truncate empty" title="@Model.UploadText">
                @if (Model.UploadText.HasValue())
                {
                    @Model.UploadText
                }
                else
                {
                    @T("FileUploader.Dropzone.Message")
                }
            </div>
            @if (!Model.Multifile)
            {
                <a href="#" class="fu-remove remove justify-content-center align-items-center pretty-link rounded-sm ml-2" title="@T("FileUploader.Dropzone.DictRemoveFile")">
                    <i class="fu-remove-icon fs-h6 p-0 text-danger">&times;</i>
                </a>
            }
        </div>
        <div id="@Model.Name" @Html.Attrs(Model.HtmlAttributes)
             data-dialog-url="@Url.Action("FileConflictResolutionDialog", "Media", new { area = "Admin" })"
             data-assignment-url="@Model.EntityAssignmentUrl"
             data-remove-url="@Model.DeleteUrl"
             data-sort-url="@Model.SortUrl"
             data-entity-id="@Model.EntityId"
             data-type-filter="@Model.TypeFilter">

            <input type="hidden" id="@(Model.Id)-file" name="@(Model.Id)-file" />

            @if (Model.ShowBrowseMedia)
            {
                <div class="fu-buttons">
                    @{ Html.RenderWidget("file_uploader"); }
                </div>
            }
        </div>
    </div>
</div>

@if (Model.Multifile)
{
    // TODO: find a better way!!!
    var mediaService = EngineContext.Current.Resolve<IMediaService>();
    var files = Model.UploadedFiles;

    <!-- Placeholder to paste preview container into -->
    <div id="@Model.PreviewContainerId" class="d-flex flex-wrap preview-container mt-3">
        @foreach (var file in files)
        {
            var previewUrl = mediaService.GetUrl(file.MediaFileId, 250);
            var isMainPic = file.MediaFileId == Model.MainFileId;
            var entityMediaId = 0;

            if (Model.EntityType.Equals("Product"))
            {
                var entityMediaFile = file as ProductMediaFile;
                entityMediaId = entityMediaFile.Id;
            }

            <div class="fu-file-preview dz-image-preview dz-success dz-complete shadow-sm"
                 data-display-order="@file.DisplayOrder"
                 data-media-id="@file.MediaFileId"
                 data-media-name="@file.MediaFile.Name"
                 @Html.Attr("data-entity-media-id", entityMediaId.ToString(), entityMediaId != 0)>

                @FilePreviewTemplate(previewUrl, file.MediaFile.Name)
            </div>
        }
    </div>

    <div class="file-preview-template d-none">
        <div class="fu-file-preview dz-image-preview shadow-sm">
            @FilePreviewTemplate("", "")
        </div>
    </div>
}

@helper FilePreviewTemplate(string previewUrl, string fileName)
{
    <span class="main-pic-badge badge badge-success">@T("FileUploader.MultiFiles.MainMediaFile")</span>

    <figure class="file-figure d-flex m-0 align-items-center justify-content-center">
        <i class="file-icon fa-fw show d-none"></i>
        <img class="file-img" data-dz-thumbnail @Html.Attr("src", previewUrl, previewUrl.HasValue()) />
    </figure>

    <!-- File (product) gallery preview overlay -->
    <div class="fu-file-info-container d-flex flex-column w-100 h-100 justify-content-between">
        <div class="drag-gripper align-middle">
            <i class="drag-icon fas fa-grip-vertical fs-h5 text-white p-0 text-center"></i>
        </div>
        <div class="fu-file-info h-100 w-100 d-flex position-absolute justify-content-center align-items-center">
            <div class="fu-file-info-name text-white font-weight-medium text-center">@fileName</div>
        </div>
        <div class="fu-preview-control-menu w-100 d-flex flex-wrap justify-content-between px-2 pb-2 pt-0">
            <a href="#" class="fu-preview-control-set set-main-picture btn btn-sm btn-clear btn-3d btn-action btn-icon" title="@T("FileUploader.Preview.SetMainMedia.Title")">
                <i class="fa fa-image fs-h6"></i>
            </a>
            <a href="#" class="fu-preview-control-remove delete-entity-picture btn btn-sm btn-clear btn-3d btn-action" title="@T("FileUploader.Preview.DeleteEntityMedia.Title")">
                <span class="fs-sm">@T("Common.Remove")</span>
            </a>
        </div>
    </div>

    <div class="fu-progress">
        <!-- The file progress bar -->
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
}

<script data-origin="FileUploader">
    $(function () {
        var elUpload = $("#@Model.Id");

		// Init dropzone
        elUpload.dropzoneWrapper({
            onUploading: @Html.Raw(Model.OnUploadingHandlerName.HasValue() ? Model.OnUploadingHandlerName : "null"),
			onUploadCompleted: @Html.Raw(Model.OnUploadCompletedHandlerName.HasValue() ? Model.OnUploadCompletedHandlerName : "null"),
			onAborted: @Html.Raw(Model.OnAbortedHandlerName.HasValue() ? Model.OnAbortedHandlerName : "null"),
			onError: @Html.Raw(Model.OnErrorHandlerName.HasValue() ? Model.OnErrorHandlerName : "null"),
			onFileRemove: @Html.Raw(Model.OnFileRemoveHandlerName.HasValue() ? Model.OnFileRemoveHandlerName : "null"),
            onCompleted: @Html.Raw(Model.OnCompletedHandlerName.HasValue() ? Model.OnCompletedHandlerName : "null"),
			onMediaSelected: @Html.Raw(Model.OnMediaSelectedHandlerName.HasValue() ? Model.OnMediaSelectedHandlerName : "null"),
            maxFiles: @(Model.Multifile ? 500 : 1),
            maxFilesSize: @maxFilesSize,
            clickableElement: @Html.Raw(Model.ClickableElement.HasValue() ? Model.ClickableElement : "null"),
            previewContainerId: "@(Model.Multifile ? Model.PreviewContainerId : "")",
            showRemoveButton: @(Model.ShowRemoveButton ? "true" : "false" ),
            showRemoveButtonAfterUpload: @(Model.ShowRemoveButtonAfterUpload ? "true" : "false" ),
            downloadEnabled: @(Model.DownloadEnabled ? "true" : "false" )
        });
    });
</script>
